<template>
  <div class="dashboard-container">
    <el-form :inline="true">
      <el-date-picker v-model="searchDate" type="daterange" align="right" unlink-panels range-separator="至"
        start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
      </el-date-picker>
      <el-button type="primary" @click="initData">查询</el-button>
    </el-form>
    <el-divider content-position="left">访问量趋势图</el-divider>
    <div id="visitCount"></div>
    <el-divider content-position="left">下单量趋势图</el-divider>
    <div id="orderCount"></div>
    <el-divider content-position="left">优惠券使用量趋势图</el-divider>
    <div id="couponCount"></div>
  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import G6 from '@antv/g6';
  import {
    Bar
  } from '@antv/g2plot';
  import DataSet from '@antv/data-set';
  import {
    Chart
  } from '@antv/g2';
  import axios from 'axios'
  export default {
    name: 'Dashboard',
    data() {
      return {
        searchDate: [new Date(new Date().getTime() - 1 * 1000 * 60 * 60 * 24 * 15), new Date()],
        // 查询日期
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        // 请求量，默认查询15天的请求量
        visitCountData: [],
        orderCountData: [],
        couponCountData: [],
        visitChart: '',
        orderChart: '',
        couponChart: '',
        firstLoad: true
      }
    },
    created() {
      console.log("created")
    },
    mounted() {
      let vm = this
      vm.initData()
    },
    methods: {
      initData() {
        let vm = this
        // 时间验证
        if(!vm.searchDate || !vm.searchDate[0] ||!vm.searchDate[1]){
             vm.$message.warning('请选择合法的时间');
        }
        axios({
          method: 'get',
          url: process.env.BASE_API + '/log-parser-service/dashboard/visit/' + vm.searchDate[0].getTime() + "/" + vm
            .searchDate[1].getTime(),
        }).then(function(res) {
          if (res.data.success) {
            vm.$message.success(res.data.message);
            console.log(res.data)
            vm.visitCountData = res.data.data.viewVOUserInfo
            vm.orderCountData = res.data.data.viewVOOrderBook
            vm.couponCountData = res.data.data.viewVOCoupon
            vm.initView()
          } else {
            vm.$message.warning(res.data.message);
          }
        })
      },
      initView() {
        let vm = this
        if (!vm.firstLoad) {
          vm.visitChart.destroy()
          vm.orderChart.destroy()
          vm.couponChart.destroy()
          vm.visitChart = ''
          vm.orderChart = ''
          vm.couponChart = ''
        }
        vm.firstLoad = false
        vm.visitChart = new Chart({
          container: 'visitCount',
          autoFit: true,
          height: 350,
          syncViewPadding: true,
        });
        vm.visitChart.data(vm.visitCountData);

        vm.visitChart.tooltip({
          showMarkers: true
        });

        vm.visitChart.line().position('date*visitCount');

        vm.visitChart.render();

        // orderCount

        vm.orderChart = new Chart({
          container: 'orderCount',
          autoFit: true,
          height: 350,
          syncViewPadding: true,
        });
        vm.orderChart.data(vm.orderCountData);

        vm.orderChart.tooltip({
          showMarkers: true
        });

        vm.orderChart.line().position('date*visitCount');

        vm.orderChart.render();

        vm.couponChart = new Chart({
          container: 'couponCount',
          autoFit: true,
          height: 350,
          syncViewPadding: true,
        });
        vm.couponChart.data(vm.couponCountData);

        vm.couponChart.tooltip({
          showMarkers: true
        });

        vm.couponChart.line().position('date*visitCount');

        vm.couponChart.render();
      },
    },
    computed: {
      ...mapGetters([
        'name',
        'roles'
      ])
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }

    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
</style>
